<template>
    <div class="solution-content">
        <div class="banner">
            <img src="/images/solution/bc.jpg" alt="">
            <div class="banner-title">专线生产设备</div>
            <div class="sub-title">“汽车工艺装备制造”整体解决方案专家</div>
        </div>

        <div class="title"><span>天奇解决方案</span></div>

        <div class="btn-list">
            <el-button block class="item" color="#e5e5e5" v-for="(item, index) in btn_list" :key="item.name">
                {{ item.name }}
            </el-button>
        </div>
        <div class="data-list">
            <div class="data-item" v-for="(item, index) in data_list" :key="item.id">
                <img :src="item.pic" alt="">
                <div class="name">{{ item.name }}</div>
                <div class="type">{{ item.type }}</div>
            </div>
        </div>

    </div>
</template>

<script setup lang='ts'>
import { reactive } from 'vue';


interface btnType {
    name: string,
    url: string
}

interface dataTye {
    name: string,
    type: string,
    pic: string,
    id: number
}


let btn_list: btnType[] = reactive([
    {
        name: '工艺装备',
        url: 'test'
    },
    {
        name: '装备工程',
        url: 'test'
    },
    {
        name: '工具刀具',
        url: 'test'
    },
    {
        name: '劳务维保',
        url: 'test'
    },
    {
        name: '再生资源',
        url: 'test'
    },

])

let data_list: dataTye[] = reactive([
    { name: 'test', type: '工艺设备', pic: './images/banner/test.jpg', id: 1 },
    { name: 'test', type: '工艺设备', pic: './images/banner/test.jpg', id: 2 },
    { name: 'test', type: '工艺设备', pic: './images/banner/test.jpg', id: 3 },
    { name: 'test', type: '工艺设备', pic: './images/banner/test.jpg', id: 4 },
    { name: 'test', type: '工艺设备', pic: './images/banner/test.jpg', id: 5 },
    { name: 'test', type: '工艺设备', pic: './images/banner/test.jpg', id: 6 },
    { name: 'test', type: '工艺设备', pic: './images/banner/test.jpg', id: 7 },
    { name: 'test', type: '工艺设备', pic: './images/banner/test.jpg', id: 8 },
])


</script>

<style scoped lang='scss'>
.solution-content {
    width: 100%;
    box-sizing: border-box;
    // display: flex;
    // justify-content: space-around;
    // flex-wrap: wrap;



    .banner {
        width: 100%;
        height: 378px;
        position: relative;
        box-sizing: border-box;
        padding: 130px 18%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .banner-title {
            font-size: 46px;
            color: #333;
        }

        .sub-title {
            font-size: 24px;
            color: #4c4c4c;
        }

        img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
    }


    .title {
        width: 100%;
        text-align: center;
        margin: 40px 0 30px 0;

        span {
            border-bottom-style: solid;
            border-bottom-width: 1px;
            box-shadow: #b2b2b2 0px px 1px;
            font-family: Microsoft YaHei;
            font-size: 24px;
            color: #323232;
        }
    }

    .btn-list {
        margin: 0 auto;
        box-sizing: border-box;
        margin-bottom: 50px;
        padding: 0 15%;

        .item {
            width: 20%;
            color: #666666;
            border-radius: 0px;
            height: 36px;
            box-sizing: border-box;
            margin-left: 0;

            &:hover {
                background-color: #1259E9;

                color: white;
            }
        }
    }


    .data-list {
        box-sizing: border-box;
        padding-bottom: 30px;
        padding: 0 15%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .data-item {
            width: 24%;
            height: 350px;
            overflow: hidden;
            box-sizing: border-box;
            border: 1px solid #ddd;
            padding: 10px;
            margin-bottom: 20px;

            img {
                width: 100%;
                height: 80%;
                transition: all .3s linear;

                &:hover {
                    transform: scale(1.1);
                }
            }


            .name {
                color: #333;
                font-size: 20px;
            }

            .type {
                color: #666;
                font-size: 12px;
            }

            &:last-child {
                margin-right: 0;
            }
        }

        .el-button:hover {
            background-color: #1259E9;
            color: white;
        }

    }

}
</style>